<template>
    <div class="product-table">
        <Row>
            <card>
                <Row>
                    <div>
                        <Button type="primary" @click="openProductModal">新增产品宽限期</Button>
                    </div>
                    <br>
                    <Col span="24">
                        <Table
                            width="100%"
                            :columns="productTableHead"
                            :data="productTable.records"
                            border
                        >
                            <template slot-scope="{ row, index }" slot="action">
                                <Button type="primary" size="small" @click="showProductDetial(row)">编辑</Button>
                                <Button type="error" size="small" @click="delProductList(row)">删除</Button>
                            </template>
                        </Table>
                    </Col>
                    <Col span="24">
                        <Row type="flex" justify="end" class="table-page">
                            <Page
                                :current="productTable.current"
                                :transfer="true"
                                :total="productTable.total"
                                :page-size="productTable.size"
                                @on-change="changePage"
                                @on-page-size-change="changePageSize"
                                :page-size-opts="pageSizeOpts"
                                size="small"
                                show-total
                                show-elevator
                                show-sizer
                            ></Page>
                        </Row>
                    </Col>
                </Row>
            </card>
        </Row>
        <Modal v-model="sendVal" :title="modelTitle" :width="500">
            <Form
                ref="form"
                :model="form"
                :label-width="110"
                :rules="formVali"
            >
                <FormItem label="产品编号" prop="productNo">
                    <Input v-model="form.productNo" style="width:198px" disabled/>
                </FormItem>
                <FormItem label="产品的宽限天数" prop="gracePeriodDays">
                    <InputNumber :min="0"  v-model="form.gracePeriodDays" style="width:198px"/>
                </FormItem>
                <FormItem label="产品名称" prop="productName">
                    <Select
                        @on-change="change"
                        v-model="form.Name"
                        placeholder="请选择"
                        clearable style="width: 200px"
                    >
                        <Option v-for="(item,index) in productList" :value="item.id" :key="index">
                            {{item.productName}}
                        </Option>
                    </Select>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="sendVal=false">取消</Button>
                <Button type="primary" @click="handleSubmit">提交</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    import {
        findProductGraceList,
        findProductList,
        saveProductGrace,
        delProductInfo
    } from "_p/basic/api/contract/business/system-business";
    import {deepClone} from "@/libs/utils/ObjectClone";

    export default {
        data() {
            return {
                companyGrace: "",
                productList: {},
                sendVal: false,
                modelTitle: null,
                form: {
                    // 添加或编辑表单对象初始化数据
                    status: "valid",
                    productNo: "",
                    gracePeriodDays: "",
                    productId: "",
                    productName: "",

                },
                formVali: {
                    // 表单验证规则
                    gracePeriodDays: [
                        {required: true, message: "不能为空"}
                    ],
                    Name: [
                        {required: true, message: "请选择"}
                    ]
                },
                formValidate: {
                    pageNumber: 1, // integer($int32) // 当前页
                    pageSize: 5, //integer($int32) // 多少条
                    status: "valid" // 状态
                },
                productTableHead: [
                    {
                        title: "操作",
                        slot: "action",
                        align: "center",
                        fixed: "left"
                    },
                    {
                        title: "产品ID",
                        key: "productNo",
                        align: "center",
                        className: "productNo"
                    },
                    {
                        title: "产品名称",
                        key: "productName",
                        align: "center",
                    },
                    {
                        title: "产品宽限期天数",
                        key: "gracePeriodDays",
                        align: "center",
                    }
                ],
                productTable: {
                    current: 1, // 表格当前页
                    pages: 0,
                    searchCount: false,
                    size: 5,
                    total: 0,
                    orders: [],
                    records: []
                },
                productRow: {},
                pageSizeOpts: [5, 10, 15, 20]
            }
        },
        mounted() {
            //载入中查询
            this.init();
        },
        methods: {
            init() {
                this.getProduct();
                //查询产品宽限期列表
                this.getProductList(this.formValidate);
            },

            // 分页
            changePageSize(num) {
                this.getProductList(
                    Object.assign({}, this.formValidate, {pageSize: num})
                );
                this.formValidate.pageSize = num;
            },
            changePage(num) {
                this.getProductList(
                    Object.assign({}, this.formValidate, {pageNumber: num})
                );
                this.formValidate.pageNumber = num;
            },
            getProductList(data) {
                findProductGraceList(data).then(res => {
                    this.loading = false;
                    if (res.code === "0000") {
                        this.productTable = res.data;
                    }
                });
            },
            showProductDetial(row) {
                this.modelTitle = '产品宽限期编辑';
                this.sendVal = true;
                this.form = deepClone(row);
                this.form.Name = row.productNo;
                console.log(row.productNo)
            },
            openProductModal() {
                this.modelTitle = '产品宽限期新增';
                this.sendVal = true;
                this.$refs.form.resetFields();
                this.form.id = '';
                this.form.productNo = '';
                this.form.productName = '';
                this.form.Name = '';
            },
            delProductList(data) {
                delProductInfo(data).then(res => {
                    this.loading = false;
                    if (res.code === "0000") {
                        this.$Message.success(res.msg);
                        this.formValidate.pageNumber = 1;
                        this.getProductList(this.formValidate)
                    }
                });
            },
            handleSubmit() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        saveProductGrace(this.form).then(res => {
                            this.loading = false;
                            if (res.code === "0000") {
                                this.$Message.success(res.msg);
                                this.sendVal = false;
                                this.getProductList(this.formValidate);
                            } else {
                                this.$Message.error("Fail!");
                            }
                        });
                    }
                });
            },
            //获取产品列表
            getProduct() {
                findProductList().then(res => {
                    this.loading = false;
                    if (res.code === "0000") {
                        this.productList = res.data.records;
                    }
                });
            },
            change(row) {
                this.form.productNo = row;
                this.productList.forEach(e => {
                    if (e.id === row) {
                        this.form.productName = e.productName;
                    }
                })
            }
        },
    }
</script>
